<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.div_parent{
				display: -webkit-flex;
				display: flex;
				width: 100%;
				background-color: #333;
				flex-direction: column;
			}
			.div1{
				background-color: #eee;
				flex: 0.2;
				/*height: 20vh;*/
			}
			.div2{
				background-color: #fff;
				flex: 0.8;
				/*height: 60vh;*/
			}
			.div3{
				background-color: #ccc;
				/*flex: 0.3;*/
				height: 80px;
			}
			
			.nav_list{
				width: 1190px;
				margin: 0 auto;
			}
			
			.nav_list li{
				list-style: none;
				float: left;
				padding-right: 50px;
				/*font-size: 4vh;*/
			}
			
			.content{
				width: 60%;
				/*height: 40vh;*/
				border: 1px solid #333;
				margin: 0 auto;
				margin-top: 50px;
			}
			.footer{
				width: 1190px;
				margin: 0 auto;
				/*font-size: 4vh;*/
			}
		</style>
	</head>
	<body>
		<div class="div_parent" id="Div">
			<div class="div1">
				<div class="nav">
					<ul class="nav_list">
						<li>导航1</li>
						<li>导航2</li>
						<li>导航3</li>
						<li>导航4</li>
						<li>导航5</li>
					</ul>
				</div>
			</div>
			<div class="div2">
				<div class="content"></div>
			</div>
			<div class="div3">
				<div class="footer">
					版权所有，盗者必究。
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var oDiv = document.getElementById('Div');
		oDiv.style.height = document.documentElement.clientHeight + 'px';
		
		window.onresize = function(){
			oDiv.style.height = document.documentElement.clientHeight + 'px';
		}
	</script>
</html>
